<template>
    <view class="verifyPwd">
        <view class="title">验证原密码</view>
        <view class="subtitle">为保障您的账号安全，修改密码前请填写原密码</view>
        <view class="input-area">
            <u-input v-model="password" :password="showPassword" placeholder="请输入6~12位密码" border="none" :customStyle="{ borderRadius: '40rpx' }">
                <template slot="prefix">
                    <view class="solt-left">
                        <u-icon name="lock-fill" size="20" color="#909399"></u-icon>
                    </view>
                </template>
                <template slot="suffix">
					<u-icon @click="showPasswordHandle()" :name="seeIcon" color="#677585FF" size="20"></u-icon>
				</template>
            </u-input>
        </view>
        <u-button @click="verifyPasswordHandle" :disabled="!password" text="下一步" color="#4DACB1FF" style="width: 90%; margin-top: 60rpx; border-radius: 50rpx;"></u-button>
    </view>
</template>

<script>
export default {
    data() {
        return {
            // 是否显示密码
            showPassword: true,
            seeIcon: 'eye-fill',

            password: ''
        }
    },
    onLoad(options) {

    },
    methods: {
        verifyPasswordHandle() {
            this.$http.put('/system/user/profile/matchesPassword?newPassword=' + this.password, {}).then(res => {
                if (res.data.code == 200) {
                    uni.showToast({ title: '验证成功', icon: 'success', duration: 1000 });
                    let that = this
                    setTimeout(() => {
                        uni.navigateTo({
                            url: '/pages/people/setNewPassword',
                            success: function (res) {
                                let obj = {
                                    oldPassword: that.password
                                }
                                res.eventChannel.emit('emitDataHandle', { data: obj })
                            }
                        })
                    }, 1000)
                } 
            })
        },
        containsSpace(str) {
            return str.includes(' ');
        },
        close() {
            this.show = false
        },
        showPasswordHandle() {
            this.showPassword = !this.showPassword;
            this.seeIcon = this.showPassword ? 'eye-fill' : 'eye-off';
        }
    }
}
</script>

<style lang="scss" scoped>
    .verifyPwd {
        display: flex;
        flex-direction: column;
        align-items: center;
        .title {    
            padding-top: 60rpx;
            font-size: 64rpx;
            font-weight: 500;
            color: rgba(12, 16, 25, 1);
        }
        .subtitle {
            margin-top: 20rpx;
            font-size: 28rpx;
            font-weight: 400;
            color: rgba(103, 117, 133, 1);
        }
        .input-area {
            width: 80%;
            margin: 0 auto;
            margin-top: 60rpx;
            padding: 20rpx 40rpx;
            background: #FFFFFFFF;
            border-radius: 100rpx;
            .solt-left {
                display: flex;
                align-items: center;
                .country {
                    margin-left: 20rpx;
                    font-size: 28rpx;
                    font-weight: 400;
                    color: rgba(12, 16, 25, 1);
                    margin-right: 12rpx;
                }
            }
        }
    }
</style>